<template>
    <div class="main">
        <div class="main-tp">
            <h1 style="font-size: 25px;font-weight: 600;text-align: left;color: black;">欢迎登录校U送</h1>
            <div style="text-align: left;margin-bottom: 10px;"><span style="color: #999">还没有账号？</span><span style="color:#D84B4B;" >立即注册</span></div>
        </div>
            <input type="text" class="num" v-model="num">
            <div class="xd">
            <input type="text" class="psw" v-model="verify">
            <div class="jd" @click="hq">获取验证码</div>
        </div>
            <p class="yw">忘记密码?</p>
            <input class="sub" type="submit" value="登录" @click.stop="dl">
            <input type="checkbox" class="" value=""  checked="false" name="cx" v-model="is_agree">
            <span style="font-size: 12px;text-align: left;">我已阅读同意<span style="color:#D84B4B">《校U送用户协议》,《隐私资源》</span>，并授权校U送该账号(如昵称，头像，收货地址)进行统一管理</span>
        <div class="bom">
            <div class="bom-lt">
                <img src="@/assets/img/login-icon01.png" alt="">
                <p>微信</p>
            </div>
            <div class="bom-rt">
                <img src="@/assets/img/login-icon02.png" alt="">
                <p>手机验证码</p>
            </div>
        </div>  
    </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            num:"123435",
            smsType:2,
            ck:true,
            is_agree:1,
            verify:"111"
        }
    },
    methods:{
        // tijiao(){
        //    axios({
        //             //请求方式，'GET'或者'POST'
        //             method: 'POST',
        //             data:{ is_agree:this.ck,mobile: this.num,verify:this.ck},
        //             //请求地址
        //             url: 'https://tr.trweilai.com/client/Member/smsLogin'
        //     }).then(res => {})
        // }
        hq(){
              axios({
                    //请求方式，'GET'或者'POST'
                    method: 'POST',
                    data:{ mobile: this.num,smsType:this.smsType},
                    //请求地址
                    url: '/client/api/sendSms'
            }).then(res => {
                console.log(res)
            })
        },
        dl(){
            axios({
                    //请求方式，'GET'或者'POST'
                    method: 'POST',
                    data:{is_agree:this.is_agree, mobile: this.num,verify:this.verify},
                    //请求地址
                    url: '/client/Member/smsregister'
            }).then(res => {
                console.log(res.request.status)
                if(res.request.status==200){
                    this.$router.push("/")
                }
            })
        }
    }
};
</script>

<style scoped>
.main{
    padding: 0 20px;
    overflow: hidden;
}
.main-tp{
    margin-top: 72px;
    overflow: hidden;
}
.main-tp h1{
    margin-bottom: 20px;
    overflow: hidden;
}
.num,.psw{
    display:block ; 
    outline: none;
    border: none;
    width: 90%;
    background-color: #d0cdcd;
    height: 50px;
    margin-top: 25px;
    border-radius: 25px;
    padding: 0 5%;
    overflow: hidden;
}
.yw{
    color:#b1b6ba;
    line-height: 60px;
    text-align: right;
    font-size: 14px;
}
.sub{
    width: 100%;
    height: 50px;
    border-radius: 25px;
    display:block ; 
    outline: none;
    border: none;
    color: #fff;
    background-color: #c33434;
    margin-bottom: 30px;
}
form{
    overflow: hidden;
}
.bom{
    display: flex;
    overflow: hidden;
    justify-content: space-around;
    margin-top: 50px;
}
.bom img{
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.bom p{
    font-size: 14px;
    color: #b1b6ba;
}
.xd{
    position: relative;
}
.jd{
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 14px;
    color: #b1b6ba;
}
</style>
